<template>
    <div class="header">
        <!-- 详情页头部信息 -->
        <div class="header-blue" v-show="!isShow" :style="opacityStyle">
            <router-link to="/" tag="span" class="iconfont">&#xe685;</router-link>
            <div class="title">南昌玛雅乐园</div>
        </div>
        <router-link tag="div"  to="/" class="header-back iconfont" v-show="isShow">&#xe685;</router-link>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isShow:true,
            opacityStyle:{}
        }
    },
    activated() {
        window.addEventListener('scroll',()=>{
            const top=document.documentElement.scrollTop;
            //  top>60? this.isShow=false : this.isShow=true;
            //console.log(top);
            if(top>60 && top<140){
                let opacity=top/140
                this.opacityStyle={opacity}
                this.isShow=false
                //注意this就要用箭头函数
            }else if(top>140){
               this.opacityStyle={opacity:1}
                this.isShow=false
            }else{
                 this.isShow=true
            }
        })
    }
    // methods:{
    //     hand(){
    //         console.log(123);
    //         const top=this.$refs.detail.getBoundingClientRect().top;
    //         console.log(top);
    //     }
    // }
}
</script>

<style lang="stylus" scoped>
.header
    position fixed
    width 100%
    top 0
    height .8rem
    color #ffffff
    line-height .8rem
    font-size .3rem
    text-align center
    .header-blue
        background-color #00bcd4
        .iconfont
            position absolute
            left .2rem
        .title
            font-size .3rem
    .header-back
        width .8rem
        height 0.8rem
        border-radius 50%
        background-color rgba(0,0,0,.5)
        position absolute
        left 0.2rem
        top .2rem
        
</style>